<template>
     <div class="pieChart" v-if="shows">
         <div class='pieChart_title'>{{name}}</div>
         <div :id='id' style='width:100%;height:100%' class='pieChart_item'>
         </div>
     </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    name:"pieChart",
    props:["name",'url','appid','id'],
    data(){
        return{
            options:{},
            shows:true,
            myChart:null
        }
    },
    methods:{
        loadData(){
            this.myChart = echarts.init(document.getElementById(this.id));
            this.$post(this.appid,this.url,{}).then(data=>{
                this.options = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        bottom: '0%',
                        left: 'center',
                        
                    },
                    /*legend: {
                        orient: 'vertical',
                        left: 'right',
                    },*/
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['60%', '40%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '14',
                                    fontWeight: 'bold'
                                }
                            },
                            label:{ 
                                show: true, 
                                formatter: '{b} : {c} ({d}%)' 
                            }, 
                            labelLine: {
                                show: false
                            },
                            data: data
                        }
                    ]
                };
            
                this.myChart.setOption(this.options);
            });
        }
    },
    mounted(){
       this.loadData();
       let sef=this;
       window.addEventListener("resize", () => {
           // window.setTimeout(function(){
                 sef.myChart.resize();
          //  },500)
        })
     
    }
}
</script>
<style scoped>
.pieChart{
    width: 100%;
    height:100%;
    background:#fff;
    padding:10px;
    box-sizing: border-box;
    box-shadow: 0px 2px 4px 3px rgba(195, 206, 220, 0.07);
    border-radius: 8px;
    display:flex;
    flex-direction: column;
}
.pieChart_title{
    
    font-weight: 800;
    color: #434E7E;
}
.pieChart_item{
    flex:1;
}
</style>